<template>
	<!-- 我的-客服 -->
	<view class="customerService public">
		<view class="main">
			<view class="main-item">
				<view class="main-itemBox">
					<view class="main-item-centent">
						你好，商品送到了吗
					</view>
					<view class="">
						<image src="https://img0.baidu.com/it/u=189649806,2789154204&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode=""></image>
					</view>
				</view>
			</view>
			<view class="main-item">
				<view class="main-itemBox">
					<view class="">
						<image src="https://img0.baidu.com/it/u=3209443208,144457008&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500" mode=""></image>
					</view>
					<view class="main-item-centent">
						你好，已为您送达
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-main flexjcsb">
				<view class="footer-main-icon">
					<!-- <uni-icons type="contact" size="43rpx"></uni-icons> -->
					<image src="../../../static/my/customerService/keyboard.png" mode=""></image>
				</view>
				<view class="footer-main-input">
					<input type="text" placeholder="在这里输入聊天内容">
				</view>
				<view class="footer-main-button flexjcc">
					发送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style lang="less" scoped>
	.customerService {
		position: relative;
		background: #F3F3F3;

		.main {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

			.main-item {
				.main-itemBox {
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.main-item-centent {
						display: flex;
						// justify-content: center;
						align-items: center;
						padding-left: 28rpx;
					}

					.main-item-centent:first-child {
						width: 280rpx;
						height: 70rpx;
						background: #3EB92E;
						border-radius: 20rpx 20rpx 0rpx 20rpx;
						margin-bottom: 42rpx;
						margin-right: 11rpx;
					}

					.main-item-centent:last-child {
						width: 301rpx;
						height: 67rpx;
						color: #343439;
						background: #DFDFDF;
						border-radius: 0rpx 20rpx 20rpx 30rpx;
						margin-left: 29rpx;
					}
				}
			}

			.main-item:first-child .main-itemBox {
				display: flex;
				justify-content: flex-end;
				padding-top: 61rpx;
			}
			.main-item:last-child .main-itemBox {
				display: flex;
				justify-content: flex-start;
			}
		}
		.footer {
			position: absolute;
			width: 100%;
			bottom: 0;
			background: white;
			
			font-size: 24rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #B2B2B2;
			.footer-main {
				width: 702rpx;
				height: 97rpx;
				margin: auto;
				.footer-main-icon {
					width: 43rpx;
					height: 43rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.footer-main-input {
					width: 450rpx;
					// border: 1px solid black;
				}
				.footer-main-button {
					width: 130rpx;
					height: 50rpx;
					background: #3EB92E;
					border-radius: 25rpx;
					color: white;
				}
			}
		}
	}
</style>